/**
 * 评论列表模块
 */
import React, { Component } from 'react'
import CommentItem from '../comment-item/commentItem'
import PropTypes from 'prop-types'

class CommentList extends Component {
  // 给组件类指定属性
  static propTypes = {
    comments: PropTypes.array.isRequired,
    delComment: PropTypes.func.isRequired,
  }
  render() {
    const { comments, delComment } = this.props
    const display = comments.length === 0 ? 'block' : 'none'

    return (
      <div className="col-md-8">
        <h3 className="reply">评论回复：</h3>
        <h2 style={{ display: display }}>暂无评论，点击左侧添加评论！！！</h2>
        <ul className="list-group">
          {comments.map((comment, index) => {
            return (
              <CommentItem
                comment={comment}
                delComment={this.props.delComment}
                index={index}
              />
            )
          })}
        </ul>
      </div>
    )
  }
}
export default CommentList
